<template>
  <li class="effect-item"
    :style="styles"
    :data-id="id"
    :class="[
      playing ? 'playing' : '',
      played ? 'played' : ''
    ]">
    <img :src="effect.image" draggable="false" alt="">
  </li>
</template>

<script>
  export default {
    name: 'effect-item',
    props: {
      id: {
        type: Number
      },
      delay: {
        type: Number,
        default: 10,
      },
      effect: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        // 定时器
        timers: {
          transform: null,
          playing: null,
          replay: null
        },
        // 播放状态
        replay: false,
        played: false,
        playing: false,
        styles: {
          'z-index': (this.id + 1) * 10,
          transition: `transform ${this.delay * 2}s linear`
        }
      }
    },
    created() {
      this.sizeMap = [0, 1, 2]
      this.colorMap = [0, 1, 2, 3, 4, 5, 6, 7]
    },
    ready() {
      // this.startAnimation()
    },
    mounted() {
      this.startAnimation()
    },
    beforeDestroy() {
      if (this.timers.transform) {
        clearTimeout(this.timers.transform)
        this.timers.transform = null
      }
      if (this.timers.playing) {
        clearTimeout(this.timers.playing)
        this.timers.playing = null
      }
    },
    methods: {
      readomTop() {
        const innerHeight = 200
        const innerCount = innerHeight / 40
        let randomCount = this.$parent.randomPer(innerCount) - 3
        randomCount = randomCount < 0 ? 1 : randomCount
        let topPre = randomCount / innerCount * 100
        topPre = (topPre > 88) ? 86 : topPre
        return `${parseInt(topPre, 0)}%`
      },
      startAnimation() {
        this.$nextTick(() => {
          // 开始动画
          this.timers.transform = setTimeout(() => {
            this.playing = true
            // 计算出一个随机高度，相对左距
            this.$set(this.styles, 'top', this.readomTop())
          })
          this.endAnimation()
        })
      },
      endAnimation() {
        // 结束动画
        this.timers.playing = setTimeout(() => {
          this.playing = false
          this.played = true
            this.$nextTick(() => {
              setTimeout(() => {

                this.$emit('end', this.id)
              }, 2000)
              // this.restartAnimation()
            })
        }, this.delay * 2 * 1000)
      },
      // 重新开始动画
      restartAnimation() {
        this.timers.replay = setTimeout(() => {
          this.playing = true
          this.played = false
          this.$nextTick(() => {
            // this.$emit('end', this.id)
            this.startAnimation()
          })
        }, 2 * 1000)
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .effect-item
    width: 300px
    right: 0
    display: block
    padding-left: 40px
    position: absolute
    transform: translate3d(100%, 0, 0)
    text-align: center

    &.replay
      transform: translate3d(100%, 0, 0)

    &.playing
      transform: translate3d(calc(-100vw - 120%), 0, 0)

    &.played
      // transform: translate3d(100%, 0, 0)
      visibility: hidden
    img
      width: 300px
      height: 200px
      border: none
    .inner
      width:600px
      height: 300px
      background-size: 100% 100%
</style>
